<template>
  <div>
    <div class="row">
      <div class="col-md-12">
        <!-- BEGIN EXAMPLE TABLE PORTLET-->
        <div class="portlet box grey-cascade">
          <div class="portlet-body">
            <div class="row">
              <img src="../../../../static/images/roleStep2.png" class="w100 roleStep" alt="">
            </div>
            <div class="row mr0 focusNone treeStyle left" style="margin-left: 15px !important;">
              <div class="col-md-6">
                <p class="titles">菜单模块权限</p>
                <ul>
                  <li>
                    <label class="el-checkbox">
                      <span class="el-checkbox__input" :class='{checked:isChecked}'  @click="isCheckedFun"> 
                      <span class="el-checkbox__inner"></span>
                      <input type="checkbox" class="el-checkbox__original" value=""></span>
                    </label>
                    首页
                  </li>
                  <li>
                    <label class="el-checkbox">
                      <span class="el-checkbox__input" :class='{checked:isChecked}'  @click="isCheckedFun"> 
                      <span class="el-checkbox__inner"></span>
                      <input type="checkbox" class="el-checkbox__original" value=""></span>
                    </label>
                    首页
                  </li>
                  <li>
                    <label class="el-checkbox">
                      <span class="el-checkbox__input" :class='{checked:isChecked}'  @click="isCheckedFun"> 
                      <span class="el-checkbox__inner"></span>
                      <input type="checkbox" class="el-checkbox__original" value=""></span>
                    </label>
                    首页
                  </li>
                </ul>
              </div>
              <div class="col-md-6">
                <p class="titles">操作权限</p>
                <el-tree
                  :data="data2"
                  show-checkbox
                  node-key="id"
                  ref="tree"
                  accordion
                  :props="defaultProps">
                </el-tree>
              </div>
              <div class="col-md-12" style="position: relative;margin-top: 20px; padding-left: 75px">
                <div>
                  <button type="button" v-if="type=='add'" @click="addPrev" class="btn blue">上一步</button>
                  <button type="button" v-if="type=='add'" @click="addNext" class="btn blue">下一步</button>
                  <button type="button" v-if="type=='update'"@click="modiflyNext($event)" class="btn blue">上一步</button>
                  <button type="button" v-if="type=='update'"@click="modiflyNext($event)" class="btn blue">下一步</button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- END EXAMPLE TABLE PORTLET-->
      </div>
    </div>
   
  </div>

</template>     

<style scoped>
    .cz{float: right;width: auto;position: relative;top: 3px;left: 5px;}
    .row.center .col-md-3{text-align: center;margin-bottom: 10px;color: #666;font-weight: 500;}
    p {margin: 0 0 10px;}
    .row.center .col-md-6{text-align: left;margin-bottom: 10px;color: #666;font-weight: 500;}
    .row.center .col-md-6 input{border: 1px solid #dbdbdb;width: 50px;padding-left: 5px;color: #333;font-weight: 500;}
    table tr td{text-align: center;vertical-align: middle;}
    .search{margin: 0 0 10px;}
    .search .form-control{width: 100%;display: inline-block;}
    .search button{position: relative;color: #fff;}
    .imgDiv img{width: 100%;}
    .undefinedbootstrap_full_number{text-align: center;;}
    .pagination{display: inline-block;}
    .dataTotal{color: #666;font-weight: 500;position: relative;top: -20px;left: 10px;}
    .pagination li a,.pagination li a .fa{color: #666;font-weight: 500;}
    .pagination li.active a,.numData{color: #26a69a;font-weight: 500;}
    .numData{font-size: 16px;}
    .row.color span{color: #333;font-weight: 500;}
    .modal-body p{color: #333;font-size: 16px;font-weight: 500;}
    .row.m0{margin: 0;}
    .row.m10 .col-md-6 >div{margin-bottom: 10px;}
    .row.m10 .col-md-6 .col-md-3{position: relative;top: 6px;color: #333;font-weight: 500;}
 
    .col-md-3,.col-md-4,.col-md-4>p{font-weight: 500;color: #333;}
    .sliderZy{background: #eee;padding:  10px 15px;margin:15px 0;}
    .sliderZy .col-md-4{padding: 10px 0;}
    .sliderZy .col-md-4:hover{cursor: pointer;}
    .sliderZy .col-md-4{text-align: center;}
    .indextype{display:none;padding: 15px 0;}
    .indextype.active{display: block;}
    .sliderIndex .col-md-4.active{background: #fff;}
    .menuCon{}
    .menuCon li{position: relative;float: left;padding: 6px 15px;margin-right: 10px;margin-bottom:10px;color: #fff;border-radius: 15px !important;background: green;}
    .menuCon li img{width: 15px;position: absolute;right: 5px;top: 5px;}
    .menuCon li img:hover{cursor: pointer;}
    .col-md-6.color .col-md-3{
          color: #666;
          font-weight: 500;
          position: relative;
          top: 5px;
      }
    .col-md-6.color{margin-bottom: 10px;}
    .focusNone .col-md-12 button{left: -204px;}
    .treeStyle .col-md-6{}
    .col-md-12 button{position: relative;left: 15px !important;}
    @media (max-width: 768px){
      .cz{margin-bottom: 0px;}
      .dataTotal{top: -5px;}
      .bs-select{width: 60%;}
    }

</style>

<script>
  import {check,Tips} from '../../../../static/js/pages/tips.js';
  import NotConTip from '../../../components/noConTip.vue' 
  import optVue from '../../../config/optVue.js';

  export default {
    data(){
      return{
        list:[],
        is_modifly:false,
        is_disabled:false,
        page: [], //页码数组
        tipText:"暂无数据",
        showTip:false,
        total:null, //总条数  
        lookObj:{},
        modifyNum:{},
        indexArr:["首页","首页"],
        navArr:["首页1","首页1"],
        zyArr:["首页2","首页2"],
        title:"",
        glNum:6,
        pageNum: null, //页数
        page_size: null, //每页显示多少条
        page_num: null, //当前页码
        job_name:"",
        role_id:"",
        qxList:[
          {id:1,name:"可见全部"},
          {id:2,name:"可见个人"}
        ],
        selected:1,
        qx_id:1,
        type:"",

        data2: [{
          id: 1,
          label: '一级 1',
          children: [{
            id: 4,
            label: '二级 1-1',
            children: []
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        isChecked:false,
        role_name:'',
        data_rule:''
      }
    },
    components: {
        NotConTip
    },
    mounted(){
      document.title = '角色管理';
      this.title = document.title;
      this.type = this.$route.query.type;
      this.role_name=this.$route.query.role_name;
      this.data_rule=this.$route.query.data_rule;
      if(this.type=='update'){ //修改
        //optVue.getRoleList(this);//得到角色类型
        this.role_id = window.localStorage.getItem('role_id');
        optVue.getModifyDygl(this,this.role_id);
        this.is_modifly = false;
      }

      if(this.type=='add'){
        this.is_modifly = false;
        //optVue.getRoleList(this);//得到角色类型
      }

      if(this.type=='infor'){ //修改
        //optVue.getRoleList(this);//得到角色类型
        this.role_id = window.localStorage.getItem('role_id');
        optVue.getModifyDygl(this,this.role_id);
        this.is_modifly = true;
        this.is_disabled = true;
      }

      $(function(){
        /*全选反选*/
        check.init($(".table-checkbox"),$(".checkboxes"));     
      })
    },
    methods:{
      addPrev:function(){
        this.$router.push({path:'/jsglsy', query: {type: 'add'}})
      }, 
      addNext:function(){
        this.$router.push({path:'/jsglgld', query: {type: 'add',role_name:this.role_name,data_rule:this.data_rule}})
      }, 
              
      isCheckedFun:function(){

      }
    }
  }
</script>



